.order-box{
	height: 100vh;
	background-color:white ;
}
.map-contain{
	width: 500rpx;
	height: 500rpx;
}
.order-info{
	min-height: 80vh;
	background-color:#F3F5F9 ;
	overflow: hidden;
	.order-header{
		margin: 40rpx;
		border-radius: 24rpx;
		background: #FEFFFE;
		height: 198rpx;
		.header-bg{
			padding: 12rpx 20rpx 11rpx;
			border-radius: 24rpx 24rpx 0 0;
			height: 32rpx;
			display:flex;
			align-items: center;
			justify-content: space-between;
			background-image: linear-gradient(269deg, #8D95AC 0%, #232031 92%);
			color: white;
			font-size: 22rpx;
			.toElectronicStub{
				display: flex;
				align-items: center;
			}
			.order-num{
				font-weight: bold;
				display: flex;
				align-items: center;
				.copy{
					width: 25rpx;
					height: 25rpx;
					margin-left: 20rpx;
				}
			}
		}
		.order-status{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 60rpx 32rpx 27rpx;
			position: relative;
			.line{
				width: 2rpx;
				height:96rpx ;
				background-color: #F5F5F5;
				position: absolute;
				left: 312rpx;
				top: 24rpx;
			}
			.status{
				text-align: center;
				.status-label{
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
				}
				.status-tips{
					font-size: 22rpx;
					color:#878787 ;
					
				}
			}
			.area{
				font-size: 24rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				.arrow{
					width: 80rpx;
					height: 12rpx;
					background-repeat: no-repeat;
					background-size: contain;
				}
				.green-arrow{
					background-image: url();
				}
				.red-arrow{
					background-image: url();
				}
				.gray-arrow{
					background-image: url('');
				}
			}
		}
	}
	.logistics-info{
		border-radius: 20rpx 20rpx 0 0;
		background: #FFFFFF;
		height: calc(100% - 198rpx);
		padding:40rpx  48rpx 120rpx;
		padding-bottom: 40rpx;
		.order-detail{
			display: flex;
			.left{
				margin-right: 20rpx;
				.send,.get{
					width: 40rpx;
					height: 40prx;
					border-radius: 50%;
					text-align: center;
					line-height: 40rpx;
					font-size: 24rpx;
				}
				.send{
					background: #000000;
					color: white;
				}
				.get{
					background: #E63E32;
					color: white;
				}
				.line{
					width: 2rpx;
					height: 136rpx;
					border-left: 2rpx dashed #D5D1D1;
					margin-left: 18rpx;
				}
				.active{
					height: 159rpx;
				}
			}
			.right{
				width: 100%;
				position: relative;
				.send-people,.get-people{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.send-title{
						height: 100%;
					}
					.send-sub-title{
						color: #151515;
						font-size: 32rpx;
						margin-bottom: 12rpx;
						font-weight: bold;
					}
					.send-desc{
						color: #888888;
						font-size: 24rpx;
					}
					.address-enter{
						font-weight: bold;
						border-left: 2rpx solid #F4F4F4;
						padding-left: 28rpx;
						font-size: 24rpx;
					}
				}
				.get-people{
					margin-bottom: 40rpx;
				}
				.send-people{
					margin-bottom: 40rpx;
				}
				.line{
					width: 100%;
					height: 2rpx;
					background-color: #F4F4F4;
					margin-bottom: 40rpx;
				}
			}
		}
		.price-detail{
			border-top: 2rpx solid #F3F4F7;
			padding: 40rpx 0;
			.goods,.weight,.payType,.base-price{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;
				.label,.value{
					font-size: 24rpx;
				}
				.label{
					color: #888;
				}
			}
			.goods{
				margin-top: 0rpx;
			}
		}
		.logistics-orderInfo{
			.logistics-orderInfo-item.active{
				.logistics-orderInfo-left{
					.circle{
						background-color:#E63E32!important;
					}
				}
			}
			.logistics-orderInfo-item{
				display: flex;
				.logistics-orderInfo-left{
					.gray.circle{
						background-color:#818181 ;
					}
					.circle{
						position: relative;
						right: 0rpx;
						width: 52rpx;
						height: 52rpx;
						text-align: center;
						line-height: 52rpx;
						border-radius: 50%;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: white;
						image{
							width:40rpx ;
							height:40rpx ;
						}
					}
					.point{
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color:#818181 ;
						margin-right: 40rpx;
						position: relative;
						left: 20rpx;
					}
					.line{
						height: 154rpx;
						width: 2rpx;
						border-left: 2rpx dashed #DFDFDF;
						position: relative;
						left: 24rpx;
					}
					.line.short{
						height:120rpx ;
					}
			
				}
				.logistics-orderInfo-right{
					margin-left: 20rpx;
					.status{
						font-size: 32rpx;
						color:#2A2929 ;
						font-weight: bold;
						margin-bottom: 6rpx;
					}
					.time{
						margin-bottom: 6rpx;
					}
					.time,.desc{
						font-size: 24rpx;
						color:#818181 ;
					}
					.desc.active{
						font-weight: bold;
						color: #2A2929;
					}
				}
			}
			
		}
	}
	.BtnFooter{
		position: fixed;
		bottom: 0;
		height: 172rpx;
		width: 100%;
		background-color: white;
		
		.waiting-box,.pay-box{
			display: flex;
			.btn{
				width: 276rpx;
				height: 88rpx;
				background: #CCCCCC;
				border-radius: 44rpx;
				color: white;
				font-size: 30rpx;
				text-align: center;
				line-height: 88rpx;
				margin: 24rpx auto 0;
			}
			.share-btn{
				background-color:#E84134;
				margin-left: 20rpx;
			}
			.cancel-order-btn{
				background-color: white;
				color: #191919;
				border: 2rpx solid #191919;
				margin-right: 20rpx;
			}
			.pay-btn{
				width: 400rpx;
				background-color:#E84134;
				color: white;
			}
		}
	}
}
//地图标记
::v-deep .customCallout{
	display: flex;
	.content,.areaContent{
		width: 108rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 30rpx;
	}
	.content{
		background-color:#fff ;
		border-radius: 16rpx 0rpx 0rpx 16rpx;
	}
	.areaContent{
		background-color:#F6EEEC ;
		border-radius: 0 16rpx 16rpx 0;
	}
	.courier{
		width: 206rpx;
		height: 60rpx;
		border-radius:20rpx ;
		background-color: #fff;
		font-size: 28rpx;
		color:#20232A ;
		text-align: center;
		line-height:60rpx ;
	}
}